<template>
  <panel title="管理员信息">
    <div class="admin">
      <div class="admin-id">管理员ID: {{ admin.id }}</div>
      <el-divider></el-divider>
      <div class="admin-acc">账号: {{ admin.account }}</div>
      <el-divider></el-divider>
      <div class="admin-user">用户组: {{ admin.userGroup }}</div>
      <el-divider></el-divider>
      <div class="admin-date">创建时间: {{ formatDate(admin.ctime) }}</div>
      <el-divider></el-divider>
      <div class="admin-img">
        <span>管理员头像:&nbsp;</span>
        <el-upload :action="BASE_URL + '/users/avatar_upload'" :on-success="imgSuccess" :before-upload="imgType">
          <img :src="BASE_URL + admin.imgUrl" alt="" />
        </el-upload>

      </div>
    </div>
  </panel>
</template>

<script>
import dayjs from "dayjs";
// import axios from "@/utils/requests";
import { imgUpload, userInfo } from "@/api/account.api";
import { BASE_URL } from "@/utils/common";
export default {
  data() {
    return {
      BASE_URL,
      admin: {},
      imgUrl: null,
      imgTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif']
    };
  },
  created() {
    this.getData()
  },
  methods: {
    formatDate(value) {
      return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
    },
    // 限制用户上传的函数
    imgType(file) {
      console.log(file);
      if (this.imgTypes.includes(file.type) && file.size / 1024 <= 500) {
        this.$message.success('上传成功！！')
        return true
      } else {
        this.$message.error('文件类型错误或文件过大！！')
        return false
      }
    },
    // 用户上传头像成功的回调
    imgSuccess(response) {
      // console.log(response);
      this.imgUrl = response.imgUrl.split('/').pop()
      imgUpload(this.imgUrl).then(res => {
        // console.log(res);
        this.$bus.$emit('imgEdit')
        this.getData()
      })
    },

    async getData() {
      const res = await userInfo();
      this.admin = res.data;
      // console.log(this.admin);
    }
  },

};
</script>

<style lang="less" scoped>
.admin {
  .el-divider--horizontal {
    margin: 24px 0;
  }

  .admin-img {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>